import React, { Component } from 'react'
import Query from '../../components/role/Query.js'
import Content from '../../components/role/Content.js'
import { connect } from 'dva';
import { Divider  } from 'antd';
import Authorized, {havePermission} from '@/utils/Authorized';

const { Secured } = Authorized;
@Secured(havePermission("AUTH_SMSROLE_SEL"))
@connect(({ auth, role, loading }) => ({ 
    authGroupList: auth.authGroupList, fetchSelAuthAllLoading: loading.effects['auth/fetchSelAuthAll'],
    addViewShow: role.addViewShow, page: role.page, total: role.total,
    roleList: role.roleList, fetchSelRoleAllLoading: loading.effects['role/fetchSelRoleAll']
}))
export default class RoleManager extends Component {
    render() {
        return (
            <div>
                <Query dispatch = {this.props.dispatch} authGroupList={this.props.authGroupList} addViewShow={this.props.addViewShow}/>
                <Divider/>
                <Content authLoading = {this.props.fetchSelAuthAllLoading} authGroupList={this.props.authGroupList}
                    roleLoading = {this.props.fetchSelRoleAllLoading} roleList={this.props.roleList}
                    dispatch = {this.props.dispatch} page = {this.props.page} total = {this.props.total}
                />
            </div>
        )
    }
    componentDidMount(){
        const { dispatch } = this.props
        dispatch({
            type: 'auth/fetchSelAuthAll',
            payload: {}
        })
        dispatch({
            type: 'role/fetchSelRoleAll',
            payload: {page:1}
        })
    }
}
